﻿@model List<LiteBlog.Common.Entities.Page>
@using LiteBlog
@{
    ViewBag.Title = "Manage Pages";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var pages = new Pages();
            pages.loadJson(@Html.Json(Model));
            ko.applyBindings(pages, document.getElementById("main"));
        });
    </script>
}

<div id="main" class="hidden" data-bind="css: {hidden: false}">
    <h1>Pages</h1>
    <div>
        <input type="button" value="Create Page" data-bind="click: add, enable: addEnable" />
    </div>
    <div class="success" data-bind="text: successMessage">
    </div>
    <div class="error" data-bind="html: errorMessage">
    </div>
    <table class="grid">
        <thead>
            <tr>
                <th style="width: 12%">Quick Edit</th>
                <th style="width: 12%">Edit</th>
                <th style="width: 12%">Delete</th>
                <th style="width: 12%">Unpublish</th>
                <th style="width: 20%">Page Url</th>
                <th style="width: 32%">Title</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: collection">
            <tr data-bind="visible: !isEdit() && !isPreview(), css: { alternateRow: !isOdd() }">
                <td style="text-align: center"><a href="#" data-bind="click: edit">Quick Edit</a></td>
                <td style="text-align: center"><a data-bind="attr: {href: editLink}">Edit</a></td>
                <td style="text-align: center"><a href="#" data-bind="{click: remove}">Delete</a></td>
                <td>
                    <a data-bind="{visible: published, click: unpublish}" href="#">Unpublish</a>
                    <span data-bind="{visible: !published()}">Draft</span>
                </td>
                <td><a data-bind="{text: id, click: preview}" href="#"></a></td>
                <td data-bind="text: title"></td>
            </tr>
            <tr data-bind="visible: isPreview" style="background-color: #ccc">
                <td style="vertical-align: top; text-align: center"><a href="#" data-bind="click: closePreview">Close Preview</a></td>
                <td colspan="5" style="background-color: #eee" data-bind="html: previewHtml"></td>
            </tr>
            <tr data-bind="visible: isEdit, css: { 'editRow': isEdit }">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input type="text" name="name" data-bind="value: id, valueUpdate: 'afterkeydown', css: { 'errorBox': id.hasError }" /></td>
                <td>
                    <input type="text" name="displayName" data-bind="value: title, valueUpdate: 'afterkeydown', css: { 'errorBox': title.hasError }" /></td>
            </tr>
            <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                <td colspan="5"></td>
                <td style="text-align: right">
                    <a href="#" data-bind="click: update">Update</a>
                    <a href="#" data-bind="click: close">Close</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>


